<template>
  <div class="task-card" style="width: 400px">
    <el-row>
      <!-- 图斑表格 -->
      <el-col :span="24">
        <el-table
          ref="tableRef"
          :data="dataList"
          style="width: 100%"
          size="small"
          :height="890"
          @current-change="viewRecordHandler"
          highlight-current-row
        >
          <el-table-column type="expand">
            <template #default="props">
              <ul class="detial-con">
                <li style="word-break: break-all">
                  <strong>监测任务名称:</strong> {{ props.row.JCRWMC }}
                </li>
                <li style="word-break: break-all">
                  <strong>监测任务代码:</strong> {{ props.row.JCRWDM }}
                </li>
                <li style="word-break: break-all">
                  <strong>图斑代码:</strong> {{ props.row.TBDM }}
                </li>
                <li style="word-break: break-all">
                  <strong>区域类型:</strong> {{ props.row.YSWTLXMC }}
                </li>
                <li style="word-break: break-all">
                  <strong>图斑变化类型:</strong> {{ props.row.TBBHLX }}
                </li>
                <li style="word-break: break-all">
                  <strong>监测日期:</strong> {{ props.row.JCRQ }}
                </li>
                <li style="word-break: break-all">
                  <strong>图斑面积:</strong> {{ props.row.Area }} m²
                </li>
                <li style="word-break: break-all">
                  <strong>所在省:</strong> {{ props.row.SHENG }}
                </li>
                <li style="word-break: break-all">
                  <strong>所在市:</strong> {{ props.row.SHI }}
                </li>
                <li style="word-break: break-all">
                  <strong>所在县:</strong> {{ props.row.XIAN }}
                </li>
                <li style="word-break: break-all">
                  <strong>经度:</strong> {{ props.row.JD }}
                </li>
                <li style="word-break: break-all">
                  <strong>纬度:</strong> {{ props.row.WD }}
                </li>
                <li style="word-break: break-all">
                  <strong>任务完成日期:</strong> {{ props.row.WTFXRQ }}
                </li>
                <li style="word-break: break-all">
                  <strong>前时相影像:</strong> {{ props.row.JZSXWXSJ }}
                </li>
                <li style="word-break: break-all">
                  <strong>后时相影像:</strong> {{ props.row.JCSXWXSJ }}
                </li>
              </ul>
            </template>
          </el-table-column>
         
          <!-- 序号列 -->
          <el-table-column type="index" label="序号" width="50" />

          <!-- 图斑名称列 -->
          <el-table-column :align="'center'" prop="JCRWMC" label="名称">
            <template #default="scope">
              <div
                style="
                  width: 100%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
                :title="scope.row.JCRWMC"
              >
                {{ scope.row.JCRWMC }}
              </div>
            </template>
          </el-table-column>

          <!-- 监测日期列 -->
          <el-table-column :align="'center'" prop="JCRQ" label="监测日期">
            <template #default="scope">
              <div
                style="
                  width: 100%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
                :title="scope.row.JCRQ"
              >
                {{ scope.row.JCRQ }}
              </div>
            </template>
          </el-table-column>

          <!-- 操作列 -->
          <!--  <el-table-column :align="'center'" label="操作" width="120px">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click.stop="handleItemClick(scope.row)"
              >
                查看
              </el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref } from "vue";

const props = defineProps({
  dataList: {
    type: Array,
    required: true,
  },
});

const emit = defineEmits(["itemSelected"]);

// 点击图斑项时触发，向父组件传递选中的图斑数据
/* const handleItemClick = (item) => {
  emit("itemSelected", item); // 向父组件发送选中的图斑信息
}; */

const expandedRowKeys = ref([]); // 保存当前展开的行的keys

// 点击图斑项时触发，向父组件传递选中的图斑数据
const handleItemClick = (item) => {
  emit("itemSelected", item); // 向父组件发送选中的图斑信息
  toggleRowExpansion(item); // 切换展开行
};

// 展开/折叠行的事件处理
const handleExpandChange = (row, expandedRows) => {
  // 当前展开的行的 keys
  expandedRowKeys.value = expandedRows.map((row) => row.id);
};

// 切换行的展开状态
const toggleRowExpansion = (item) => {
  // 如果当前行已经展开，则折叠它；否则展开它并关闭其他行
  if (expandedRowKeys.value.includes(item.id)) {
    expandedRowKeys.value = []; // 如果该行已展开，折叠它
  } else {
    expandedRowKeys.value = [item.id]; // 只展开当前行
  }
};

// 处理当前选中的记录
const viewRecordHandler = (row) => {
  emit("itemSelected", row); // 向父组件发送选中的图斑信息
};
</script>

<style scoped>
.task-card {
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.6));
  box-shadow: 0px 10px 19px 1px rgba(92, 99, 106, 0.38);
  border-radius: 3px;
  left: 34px;
  top: 120px;
  padding: 10px;
  overflow: scroll;
  overflow-x: hidden;
}

.detial-con {
  list-style: none;
  padding: 0;
  margin: 0;
}

.el-table .cell {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
<style lang="scss">
.task-card {
  .el-form-item {
    margin-bottom: 5px !important;
  }

  .el-select__wrapper {
    box-shadow: 0 0 0 1px rgb(109, 194, 236) inset;
  }

  .filter-container {
    .el-input__wrapper {
      box-shadow: 0 0 0 1px rgb(109, 194, 236) inset;
      background: rgba(34, 42, 51, 0.5);
      color: #d1e5ff;
    }
  }

  .el-table {
    --el-table-header-bg-color: #1b384d9c !important;
    --el-table-tr-bg-color: #2a57779c !important;
    --el-table-border-color: rgb(109, 194, 236);
    --el-table-row-hover-bg-color: #152b3a9c !important;

    tr {
      cursor: pointer;
      color: #ccc;
      background: none;
    }

    .el-table__body tr.current-row > {
      td.el-table__cell {
        background-color: #0c1b2975;
        color: rgb(109, 194, 236);
        color: #fff;
      }
    }
  }

  .page-container {
    --el-input-border-color: rgb(109, 194, 236) !important;

    .el-input__wrapper {
      box-shadow: 0 0 0 1px rgb(109, 194, 236) inset;
    }

    .el-select {
      --el-select-border-color-hover: rgb(109, 194, 236) !important;
    }
  }
}
</style>
